<template>
  <view class="orderDetail">
    <view class="bgRadius orderZhuang">
      <view class="zhuangHeader flex flex-align">
        <image src="@/static/shop/shop09.png" mode="scaleToFill" />
        <view class="flex flex-direction flex-bt">
          <view class="name">订单{{orderStatus[dataInfo.order_status]}}</view>
          
          <view class="miaoshu" v-if="dataInfo.order_status==2||dataInfo.order_status==3">该订单等待发货，请耐心等待哦～</view>
        </view>
      </view>
      <view class="zitiRen ">
        <view class="flex flex-align flex-bt">
          <view class="name">提货人</view>
          <view class="value">{{addressInfo.pickup_name}}</view>
        </view>
        <view class="flex flex-align flex-bt">
          <view class="name">联系方式</view>
          <view class="value">{{addressInfo.pickup_phone}}</view>
        </view>
      </view>
    </view>
    <view class="bgRadius shopInfo">
      <view class="homeTitle"><text>商品信息</text></view>
      <view class="shopList">
        <view class="shopItem flex flex-bt">
          <view class="left flex">
            <image :src="getImgUrl(dataInfo.goods_image)"  mode="scaleToFill" />
            <view class="flex flex-direction flex-bt">
              <view class="name">{{dataInfo.goods_name}}</view>
              <view class="text">
                <view><text v-for="(item,index) in dataInfo.goods_specs" :key="index">{{ item }}</text></view>
              </view>
            </view>
          </view>
          <view class="right">
            <view class="price">
             <text v-if="goodTypeData?.kind==1">￥</text>{{dataInfo.goods_price}} <text style="font-size: 22rpx;" v-if="goodTypeData?.kind!=1">{{goodTypeData?.name}}</text>
            </view>
            <view class="number">x{{dataInfo.goods_num}}</view>
          </view>
        </view>
      </view>
      <view class="quanBao flex flex-align flex-end" v-if="dataInfo.return_coupon">
        <view class="right flex flex-align">
          <view class="name">{{dataInfo.return_coupon[0].name}}*{{ dataInfo.return_coupon[0].num }}...</view>
          <view class="value">
            <uni-icons type="right" size="16" color="#fff"></uni-icons>
          </view> 
        </view>
      </view>
      <view class="list">
        <view class="flex flex-align flex-bt" v-if="dataInfo.desc">
          <view class="name">订单备注</view>
          <view class="value flex flex-align flex-end">
           {{ dataInfo.desc }}
          </view>
        </view>
        <view class="flex flex-align flex-bt">
          <view class="name">商品总额</view>
          <view class="value">
            <text v-if="goodTypeData?.kind==1">￥</text>{{dataInfo.order_amount}} <text  style="font-size: 24rpx;" v-if="goodTypeData?.kind!=1">{{goodTypeData?.name}}</text>
          </view>
        </view>
        <view class="flex flex-align flex-bt" v-if="dataInfo.postage!=0">
          <view class="name">运费</view>
          <view class="value">{{dataInfo.postage==0?'包邮':'￥'+dataInfo.postage}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="dataInfo.payment&&couponData.length!=0">
          <view class="name">优惠券</view>
          <view class="value flex flex-align">
            <view>-¥{{couponNum}}</view>
          </view>
        </view>
        <!-- <view class="flex flex-align flex-bt" v-if="dataInfo.payment">
          <view class="name">虚拟币抵扣</view>
          <view class="value flex flex-align">
            <view>-¥10.00</view>
          </view>
        </view> -->
        <view class="flex flex-align flex-bt">
          <view class="name">总计</view>
          <view class="value red" v-if="dataInfo.goods_pay_currency_id==1">
            <text>￥</text>{{dataInfo.order_cash_amount}}
          </view>
          <view class="value red" v-if="dataInfo.goods_pay_currency_id!=1">
            <text v-if="dataInfo.order_cash_amount!=0">{{dataInfo.order_cash_amount}}+</text>{{dataInfo.order_amount}}<text style="font-size: 24rpx;">{{goodTypeData?.name}}</text>
          </view>
        </view>
        <view class="flex flex-align flex-end youhui" @click="openCoupon"  v-if="dataInfo.payment&&couponData.length!=0">
          <view class="name">已优惠￥{{countJian>dataInfo.order_amount?dataInfo.order_amount:countJian}}</view>
          <uni-icons type="right" size="16" color="#B3B5B7"></uni-icons>
        </view>
        <view class="flex flex-align flex-bt">
          <view class="name">本单佣金</view>
          <view class="value red">￥{{dataInfo.commision_amount}}</view>
        </view>
      </view>
    </view>
    <view class="bgRadius shopInfo">
      <view class="homeTitle"><text>订单信息</text></view>
      <view class="list">
        <view class="flex flex-align flex-bt">
          <view class="name">订单编号</view>
          <view class="value">{{dataInfo.order_no}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.created">
          <view class="name">下单时间</view>
          <view class="value">{{timestampToDateTime(actiontime.created)}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.paid">
          <view class="name">支付时间</view>
          <view class="value">{{timestampToDateTime(actiontime.paid)}}</view>
        </view>
        <view class="flex flex-align flex-bt">
          <view class="name">支付方式</view>
          <view class="value">{{goodTypeData?.name}}支付</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.shipping">
          <view class="name">发货时间</view>
          <view class="value flex flex-align">{{timestampToDateTime(actiontime.shipping)}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.paid_req_refund">
          <view class="name">申请退款时间</view>
          <view class="value flex flex-align">{{timestampToDateTime(actiontime.paid_req_refund)}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.paid_refund">
          <view class="name">退款完成时间</view>
          <view class="value flex flex-align">{{timestampToDateTime(actiontime.paid_refund)}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.returned_req">
          <view class="name">申请退货时间</view>
          <view class="value flex flex-align">{{timestampToDateTime(actiontime.returned_req)}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.pickuped">
          <view class="name">提货时间</view>
          <view class="value flex flex-align">{{timestampToDateTime(actiontime.pickuped)}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.finished">
          <view class="name">订单完成时间</view>
          <view class="value flex flex-align">{{timestampToDateTime(actiontime.finished)}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.returned_send">
          <view class="name">退货到达时间</view>
          <view class="value flex flex-align">{{timestampToDateTime(actiontime.returned_send)}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.returned_req_pass">
          <view class="name">退货审核时间</view>
          <view class="value flex flex-align">{{timestampToDateTime(actiontime.returned_req_pass)}}</view>
        </view>
      </view>
    </view>
    <view style="height: 120rpx;"></view>
    <!-- <view class="footer">
      <view class="flex flex-align flex-bt">
        <view class="left flex flex-align">
          <view class="name">合计:</view>
          <view class="value red">998 <text>礼品卡</text></view>
        </view>
        <view class="btn flex flex-align">
          <view class="yjmingxi">
            取消订单
          </view>
          <button class="submite">确认支付</button>
        </view>
      </view>
    </view> -->
    <view class="footer">
      <view class="flex flex-align flex-end tuikuan">
        <button class="submite button" @click="goOrderCancel" v-if="dataInfo.order_status==0||dataInfo.order_status==2">取消订单</button>
        <button class="button active" @click="goOrderCancel" v-if="dataInfo.order_status==0||dataInfo.order_status==2">立即支付</button>
        <!-- <button class="submite button" @click="menuJump({is_tab:false,link:'/pages/orderList/refund?id=1',link_type:1})">申请退款</button> -->
      </view>
    </view>
    <couponMx ref="couponMxRef"></couponMx>
  </view>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, unref, watch } from 'vue';
import couponMx from '@/components/couponMx.vue';
import { getTime, getTimeDifference, menuJump, toast,getDistance, getImgUrl,timestampToDateTime } from '@/utils/tools';
import { orderCancel,  orderRefundBefore, teamOrderInfo } from '@/api/user';
import { onLoad } from '@dcloudio/uni-app';
import { useAuthStore } from '@/stores/counter';
const couponMxRef = ref<InstanceType<typeof couponMx>>()
async function openCoupon(){
  couponMxRef.value?.open(couponData.value)
}
const orderStore = useAuthStore();
const orderStatus =ref<Recordable>(orderStore.orderStatus)
console.log(orderStatus.value)
const goodTypeList = computed(() => orderStore.confige.currency); 
const goodTypeData = ref<
  | {
      id: number;
      name: string;
      kind: number
    }
  | undefined
>(undefined);
const dataInfo = ref<Recordable>({})
const addressInfo = ref<Recordable>({})
const couponData = ref<Recordable>([])
const actiontime = ref<Recordable>({})
const couponNum = ref(0)
const countJian = ref(0) 
const id = ref('')
watch(dataInfo, () => {
  if (dataInfo.value.goods_pay_currency_id) {
    goodTypeData.value = unref(goodTypeList).find((v: { id: any; }) => v.id === dataInfo.value.goods_pay_currency_id);
  }
}, { immediate: true });
onLoad((e:any)=>{
  id.value = e.id
  getDetail()
})
onMounted(() => {
 
})
// 获取订单详情
function getDetail() {
  let parme = {
    order_id: id.value,
  }
  teamOrderInfo(parme).then((res: any) => {
    dataInfo.value = res
    addressInfo.value = res.address
    dataInfo.value.hour = JSON.parse(getTimeDifference(res.survived_at)).hour
    dataInfo.value.minute = JSON.parse(getTimeDifference(res.survived_at)).minute
    dataInfo.value.second = JSON.parse(getTimeDifference(res.survived_at)).second
    if(res.action){
      actiontime.value = res.action

    }
    let cash = []
    if(res.payment){
      couponData.value = res.payment.filter((v: { kind: any; }) => v.kind === 'COUPON');
      cash = res.payment.filter((v: { kind: any; }) => v.kind === dataInfo.value.goods_pay_type);
      couponData.value.forEach((v: { amount_to_cash: any; }) => {
        couponNum.value += v.amount_to_cash
      })
      countJian.value = couponNum.value
    }
  })
}
// 取消订单
function goOrderCancel(){
  orderCancel({order_id:id.value}).then((res:any)=>{
    uni.showToast({
      title: '取消成功',
      icon: 'none',
      duration: 1000
    })
    setTimeout(()=>{
      uni.navigateBack() 
    },1000)
  })
}
// 退款
function goRefund(){
  orderRefundBefore().then((res:any)=>{
    
  })
}
</script>

<style scoped lang="scss">
.orderDetail{padding: 26rpx;
  .orderZhuang{padding:30rpx;
    .zhuangHeader{margin-bottom: 20rpx;
      image{width: 80rpx;height: 80rpx;margin-right: 10rpx;
    }
      .name{font-size: 30rpx;font-weight: 600;  }
      .miaoshu{font-size: 24rpx;color: #999999;margin-top: 10rpx;}
      .miaoshu.red{color: #FE7431;font-weight: bold;}
    }
    .wuliu{font-size: 24rpx;color: #323333;padding: 30rpx 20rpx;border-radius: 20rpx;
      background: #F5F6F7;
      .left{margin-right: 20rpx;color: #969799;}
      .right{color: #FE7431;}
      .info{margin-top: 20rpx;font-weight: bold;font-size: 28rpx;}
    }
    .zitiRen{padding: 10rpx 10rpx 0;
      .flex{height: 50rpx;}
      .name{font-size: 26rpx;color: #969799;}
      .value{font-size: 26rpx;color: #FE7431;font-weight: bold;margin-top: 6rpx;}
    }
  }
  .addressInfo{padding-top: 30rpx;
    .left{
      .name{font-size: 28rpx;color: #323232;font-weight: bold;
        text{
          background: #FE7431;padding: 6rpx 15rpx;border-radius: 20rpx;color: #fff;font-size: 20rpx;
        }
      }
      .value{font-size: 26rpx;color: #969799;margin-top: 16rpx;}
    }
  .right{
    .uni-icons{color: #969799;}
    }
  }
  .shopInfo{
    .list{
      .youhui{
       .name{font-size: 24rpx;color: #B3B5B7;}
      }
      .flex{padding: 6rpx 0;
        .name{font-size: 28rpx;color: #969799;}
        .value{font-size: 28rpx;color: #333;font-weight: bold;
          input{border: none;outline: none;font-size: 28rpx;color: #333;text-align: right;width: 500rpx;}
        }
        .red{
          color: #FE4927;
        }
      }
    }
    .quanBao{background:url('@/static/shop/shop05.png');border-radius: 50rpx;color: #fff;padding-left: 20rpx;margin:20rpx 0;
    background-size: 100% 100%;
    .flex{padding: 14rpx 10rpx 14rpx 0;
      .name{font-size: 24rpx;color: #fff;}
      .value{font-size: 24rpx;color: #FE7431;}
      }
    }
  }
  .shopList{
    .shopItem{padding: 20rpx 0;
      .left{
        image{width: 170rpx;height: 170rpx;}
        .flex-direction{margin-left: 20rpx;
          .name{font-size: 28rpx;color: #333;width: 320rpx;font-weight: bold;}
          .text{font-size: 24rpx;color: #969799;margin-top: 10rpx;
          view{background: #F5F6F7;border-radius: 40rpx;padding: 4rpx 20rpx;display: inline-block;}
          }
        }
      }
    .right{text-align: right;font-weight: bold;
      .price{font-size: 32rpx;color: #323233;
        text{font-size: 24rpx;}
      }
      .number{font-size: 24rpx;color: #969799;margin-top: 10rpx;}
    }
    }
  }
}
.zitiInfo{padding: 0;
  .bgImg{background: url('@/static/shop/shop03.png') no-repeat;background-size: 100%;padding: 20rpx;
    .left{
      image{
        width: 144rpx;margin-right: 20rpx;height: 144rpx;
      }
    }
    .right{
      .title{font-weight: bold;
        .name{font-size: 30rpx;color: #333;}
        .km{font-size: 24rpx;color: #FE7431;}
      }
      .address{font-size: 24rpx;color: #969799;}
    }
  }
  
}
.zhifuType{
  .list{
    .flex{
      .left{
        .Img{width: 80rpx;height: 80rpx;}
        .value{font-size: 28rpx;color: #333;font-weight: bold;margin-left: 10rpx;}
      }
    }
  }
}
.footer{background: #fff;position: fixed;bottom:0;left:0;width: 100%;padding:20rpx 20rpx 40rpx;z-index: 11;
  box-sizing: border-box;
  .flex{
    .name{font-size: 28rpx;color: #969799;margin-right: 10rpx;}
    .value{font-size: 36rpx;color: #333;
      font-weight: bold;
      text{font-size: 24rpx;}
    }
    .red{color: #FE4927;}
  }
 .btn{
  .yjmingxi{width: 250rpx;text-align: right;padding-right: 20rpx;
   .name{font-size: 24rpx;color: #969799;}
    .flex{margin-top: 6rpx;font-size:22rpx;font-weight: bold;
      .redPrice{font-size: 24rpx;color: #FE4927;} 
    }
  }
   button{background: #FE7431;border-radius: 40rpx;color: #fff;font-size: 24rpx;padding: 6rpx 50rpx;}
  }
  .tuikuan{
    button{background: #F5F6F7;border-radius: 40rpx;color: #646566;padding: 6rpx 50rpx;}
    .active{background: #FE7431;border-radius: 40rpx;color: #fff;margin-left: 20rpx;}
  }
}
</style>